<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {load href='/static/css/bootstrap.css'}
    {load href='/static/css/all.css'}
    {load href='/static/js/jquery-3.4.1.min.js'}
    {load href='/static/js/bootstrap.min.js'}
    {load href='/static/js/bootbox.min.js'}
    <style>
        .pagination{float:right}
        .pagination>li{margin-left: 4px;}

        .container-furid{
            width: 80%;

        }
        body{position:relative;box-sizing: border-box;font-size: 12px;justify-content: right;align-items: center;display: flex;background-color: rgba(220, 220, 220, 0);margin-right: 4%}
        .btn{
            width: 80px; /* 设置按钮宽度为 80 像素，可根据实际需求调整数值 */
            height: 30px; /* 设置按钮高度为 30 像素，可根据实际需求调整数值 */
            font-size: 12px; /* 同时可以适当调小按钮文字的字体大小，让整体更协调 */
            padding: 5px 10px;
        }
        .form-control{
            height: 30px;
        }

    </style>
</head>
<body>

<div class="container-furid" style="padding: 0px">
    {if($role=='员工')}
    <table class="table table-hover" border="1">
        <tr style="background: #e7c3c3"><th>ID</th><th>姓名</th><th>年龄</th><th>性别</th><th>所属部门</th><th>职称</th><th>手机号</th><th>毕业院校</th><th>基本工资</th><th>入职时间</th><th>操作</th></tr>
        {volist name='data' id='v'}
        <tr style="background: #9acfea"><td>{$v.id}</td><td>{$v.name}</td><td>{$v.age}</td><td>{$v.sex}</td><td>{$v.department}</td><td>{$v.level}</td><td>{$v.phone}</td><td>{$v.school}</td><td>{$v.gonzi}</td><td>{$v.ruzhi}</td>
            <td><button class="btn btn-primary btn-edit" data-toggle='modal' data-target='#editModal' data-backdrop='static' onclick="edit({$v.num})"><span class="fa fa-edit"></span>修改</button></td>{/volist}
    </table>
    {$data|raw}
    {else}
    <table class="table table-hover" border="1">
        <tr style="background: #e7c3c3"><th>ID</th><th>{$num}</th></tr>
        <tr style="background:  #9acfea"><th>name</th><th>{$name}</th></tr>
        <tr style="background: #e7c3c3">
            <td colspan="2" style="text-align: center"><button class="btn btn-primary btn-edit" data-toggle='modal' data-target='#edit11Modal' data-backdrop='static' onclick="edit11({$num})"><span class="fa fa-edit"></span>修改</button></td></tr>
    </table>
    {/if}

</div>
</body>
</html>
<div class="modal" id="editModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">修改个人信息</div>
                <button class="close" data-dismiss='modal'>&times;</button>
            </div>
            <div class="modal-body">
                <form action="" id="editForm">
                    <input type="hidden" id="num" name="num">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="id">ID：</label>
                                <input type="text" class="form-control" id="id" name="id" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="name">姓名：</label>
                                <input type="text" class="form-control" id="name" name="name" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="sex">性别：</label>
                                <input type="text" class="form-control" id="sex" name="sex" >
                            </div>
                            <div class="col-sm-6">
                                <label for="age">年龄：</label>
                                <input type="text" class="form-control" id="age" name="age" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="level">职称：</label>
                                <input type="text" class="form-control" id="level" name="level" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="phone">手机号：</label>
                                <input type="text" class="form-control" id="phone" name="phone" maxlength="11" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="gonzi">工资：</label>
                                <input type="text" class="form-control" id="gonzi" name="gonzi" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="department">所属部门：</label>
                                <input type="text" class="form-control" id="department" name="department" readonly>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="update()">保存信息</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="edit11Modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">修改个人信息</div>
                <button class="close" data-dismiss='modal'>&times;</button>
            </div>
            <div class="modal-body">
                <form action="" id="edit11Form">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6">
                                <label for="n">ID：</label>
                                <input type="text" class="form-control" id="n" name="number" readonly>
                            </div>
                            <div class="col-sm-6">
                                <label for="xm">姓名：</label>
                                <input type="text" class="form-control" id="xm" name="name" >
                            </div>
                        </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="update11()">保存信息</button>
            </div>
        </div>
        </div>
    </div>
</div>
</div>
<script>

    function edit(id){
        $.get("/index.php/index/edit",{'id':id},function(res){
            $("#name").val(res.name);
            $("#num").val(res.num);
            $("#id").val(res.id);
            $("#age").val(res.age);
            $("#level").val(res.level);
            $("#sex").val(res.sex);
            $("#phone").val(res.phone);
            $("#gonzi").val(res.gonzi);
            $("#department").val(res.department);
        });
    }

    function update(){
        $.post("/index.php/index/update",$("#editForm").serialize(),function(res){
            if(res==1){
                bootbox.alert("修改成功",function(){
                    window.location.reload();
                })
            }else{
                bootbox.alert("修改失败");
            }
        });
    }
    function edit11(id){
        $.get("/index.php/index/edit11",{'id':id},function(res){
            $("#xm").val(res.name);
            $("#n").val(res.number);
        });
    }
    function update11(){
        $.post("/index.php/index/update11",$("#edit11Form").serialize(),function(res){
            if(res==1){
                bootbox.alert("修改成功,请退出重新登录！！！！！！！！！！！！！",function(){
                    window.location.reload();
                })
            }else{
                bootbox.alert("修改失败");
            }
        });
    }
</script>